<template>
  <div class="baseinfo-container">
    <el-form ref="postForm" :model="postForm" class="form-container">
      <el-form-item label-width="120px" class="postInfo-container-item" label="任务名称">
        <el-input v-model="postForm.title" :rows="1" type="textarea" class="article-textarea" autosize
          placeholder="输入任务名称" />
        <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}个</span>
      </el-form-item>

      <el-form-item label-width="120px" prop="content" class="postInfo-container-item" label="详细说明">
        <Tinymce ref="editor" v-model="postForm.content" :height="250" />
      </el-form-item>

      <el-form-item label-width="120px" label="上报类型" class="postInfo-container-item">
          <el-select v-model="postForm.reportType" placeholder="请选择上报类型" @change="selectReportType">
              <el-option label="通知" value="通知"></el-option>
              <el-option label="文件上传" value="文件上传"></el-option>
              <el-option label="表格填报" value="表格填报"></el-option>
              <el-option label="测评问卷" value="测评问卷"></el-option>
            </el-select>
      </el-form-item>
      <el-form-item label-width="120px" label="任务类别" class="postInfo-container-item">
        <el-select v-model="postForm.taskType" placeholder="请选择任务类别">
          <el-option v-for="item in classifyOpt" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="120px" label="紧急程度" class="postInfo-container-item">
        <el-select v-model="postForm.important" placeholder="请选择紧急程度">
          <el-option label="紧急" value="紧急"></el-option>
          <el-option label="重要" value="重要"></el-option>
          <el-option label="常规" value="常规"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="120px" class="postInfo-container-item" label="截止时间">
        <el-date-picker v-model="postForm.utilTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
        placeholder="截止时间" />
        <!-- <span>结束时间到期后，将无法上传文件</span> -->
      </el-form-item>
      <el-form-item label-width="120px" class="postInfo-container-item" label="关联指标" v-if="postForm.reportType === '文件上传'">
          <el-switch @change="changeRelate"
            v-model="postForm.isRelate">
          </el-switch>
      </el-form-item>
      <el-form-item label-width="120px" label="附件">
        <file-check ref="upload"  v-bind="$attrs" v-on="$listeners" :preview="isEdit"></file-check>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import Tinymce from '@/components/Tinymce'
 
  import {
    postCreateTask,
    getTaskClassify
  } from '@/api/work.js'
  import {
    parseTime,
    getFileType
  } from '@/utils/index'

  export default {
    name: 'BaseInfo',
    components: {
      Tinymce,
      FileCheck: () => import("@/views/markSys/components/FileCheck")
    },
    props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    initData:{
      type: Object,
      default: {}
    }
  },
    computed: {
      contentShortLength() {
        return this.postForm.title.length
      }
    },
    data() {
      return {
        postForm: {
          title: '',
          content: '',
          utilTime: '',
          taskType: '',
          important: '常规',
          isRelate: false,
          reportType: '通知'
        },
        ishow:true,
        files: [],
        uploadPress: 0,
        classifyOpt: [],
        taskClassify: [],
        noticeClassify: [],
      }
    },
    watch: {
      postForm: {
        handler(data) {
          const { reportType } = data
           // 根据上报类型加载任务类别
          if(reportType === '通知') {
            this.classifyOpt = this.noticeClassify
          }else{
            this.classifyOpt = this.taskClassify
          }
        },
        deep: true
      }
    },
    mounted() {
      this.requestTaskClassify()
      if(this.initData){

        const { title, content, reportType, taskType, fileList, end_time } = this.initData
      this.postForm.title = title || ''
      this.postForm.content = content || ''
      this.postForm.reportType = reportType || ''
      this.postForm.taskType = taskType || ''
      this.postForm.utilTime = end_time || ''
      this.$refs.upload.initPreFileList = fileList || []
     
    }
    },
    methods: {
      // 处理是否关联
      changeRelate(val){
        this.postForm.isRelate = val
        this.$emit('changeRelate',val)
      },
      selectReportType(val){
        const isFileReport = val === '文件上传' ? true : false
        this.$emit('changeReportType',val)

        this.$emit('changeRelate', false)
        this.postForm.isRelate = false 

        // 如果类型是通知 选择noticeClassify
        if(val === '通知') {
          this.classifyOpt = this.noticeClassify
        }else{
          this.classifyOpt = this.taskClassify
        }
        // 默认选择第一个
        this.postForm.taskType = this.classifyOpt[0] && this.classifyOpt[0].id
      },
      async requestTaskClassify() {
        const { data } = await getTaskClassify()
        const classifyList = data.results
        const taskClassify = classifyList.filter(item => item.type === 'task')
        const noticeClassify = classifyList.filter(item => item.type === 'notice')
        this.taskClassify =  taskClassify
        this.noticeClassify = noticeClassify
        // 默认加载通知 任务类别
        this.classifyOpt = noticeClassify
        // 当创建任务状态下，默认选择第一个
        if(!this.isEdit) {
          this.postForm.taskType = noticeClassify[0] && noticeClassify[0].id
        }
      }
    },
  }

</script>
<style lang="scss">
  .baseinfo-container {
    position: relative;

    padding: 10px 50px 0;

    .postInfo-container-item {
      margin-bottom: 20px;
      .editor-custom-btn-container{
        display: none;
      }
    }


    .word-counter {
      width: 40px;
      position: absolute;
      right: 10px;
      top: 0px;
    }
    .el-input__inner{
      width: 350px!important;
    }
  }

  .article-textarea /deep/ {
    textarea {
      padding-right: 40px;
      resize: none;
      border: none;
      border-radius: 0px;
      border-bottom: 1px solid #bfcbd9;
    }
  }

  .progress {
    height: 40px;
    color: #e2d8d8;
    background: #4489ca;
    font-size: 16px;
  }

  .fileInfo {
    height: 30px;
    line-height: 60px;
    border: 1px solid #ccc;
    padding-left: 16px;
    font-size: 16px;
    background: #e3eefc;
  }

  .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
  }

  /*E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F*/

  .inputfile+label {
    color: #3e97df;
    display: inline-block;
  }

  .inputfile:focus+label,
  .inputfile+label:hover {
    color: #0c89f0;
  }

  h3 {
    padding: 10px 0 0 16px;
    font-weight: normal;
    font-size: 18px;
    color: #666;
  }

  .filePart {
    line-height: 30px;
    overflow: hidden;
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    height: 30px;
  }

  .fileStatus {
    overflow: hidden;
    float: left;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
  }

  .ml10 {
    margin-left: 10px;
  }

  .fileName {
    width: 400px;
  }

  .fileSize {
    width: 120px;
    text-align: center;
  }

  .uploadFail {
    color: #ff0800d3;
  }

  .uploadSuccess {
    color: #2c832c;
  }

</style>
